<template>
	<view>
		<view class="navbar">
			<navigator open-type="navigateBack" v-if="!isSwitchTab">
				<image src="/static/images/back.png"></image>
			</navigator>
			<navigator open-type="switchTab" :url="url" v-else>
				<image src="/static/images/back.png"></image>
			</navigator>
			<text>{{title}}</text>
			<view class="right" v-if="showRight" @click="onClick">{{other}}</view>
			<slot v-if="showSlot"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"navbar",
		props:{
			title:{
				type:String,
				default:'标题'
			},
			other:{
				type:String,
				default:'其他'
			},
			showRight:{
				type:Boolean,
				default:false
			},
			showSlot:{
				type:Boolean,
				default:false
			},
			isSwitchTab:{
				type:Boolean,
				default:false
			},
			url:{
				type:String,
				default:''
			}
		},
		methods: {
			onClick() {
				this.$emit('onClick');
			}
		},
	}
</script>

<style lang="scss" scoped>
.navbar {
	width: 750rpx;
	height: 100rpx;
	background-color: #FFFFFF;
	z-index: 9999;
	position: fixed;
	top: var(--status-bar-height);
	@include center;

	navigator {
		position: absolute;
		left: 30rpx;

		image {
			width: 35rpx;
			height: 35rpx;
		}
	}

	text {
		font-size: 38rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: center;
	}
	
	.right{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF1605;
		position: absolute;
		right: 30rpx;
	}
}
</style>
